<template>
    <h2>虚线流动动画</h2>
    <h2>有多个连接模板，可以定义不同样式 myDiagram.linkTemplateMap</h2>
    <div id="chart-diagram" style="background-color: whitesmoke; width: 1000px; height: 1000px;">
    </div>
</template>

<script setup>
    import {onMounted} from 'vue';
    import go from "gojs";

    let myDiagram = null;
    const templmap = new go.Map()
    const color = "#000"
    const init = () => {
        const $ = go.GraphObject.make


        let myDiagram = new go.Diagram("chart-diagram", {
            'grid.visible': true, // 显示网格
            'clickCreatingTool.archetypeNodeData': {category: 'Normal', text: '新节点', notice: ''}, // 双击新建节点(可以写入节点的默认信息)；；
            'toolManager.hoverDelay': 100, // tooltip提示显示延时
            'toolManager.toolTipDuration': 10000, // tooltip持续显示时间
            allowMove: true, // 允许拖动画板
            allowDragOut: true, // 允许拖拽节点
            allowDelete: true, // 允许删除节点
            allowCopy: true, // 允许复制节点
            allowClipboard: true, // 允许粘贴节点
            //layout: $(go.TreeLayout, {angle: 0, nodeSpacing: 40, layerSpacing: 30})
        });

        myDiagram.nodeTemplate = $(go.Node, "Auto", // 框自动适应文本
            $(go.Shape, "RoundedRectangle", new go.Binding("fill", "color")),
            $(go.TextBlock, {margin: 15, font: 'bold 15pt sans-serif'}, new go.Binding("text", "name"))
        );
        myDiagram.model = new go.GraphLinksModel(
            [ // 节点
                {key: 'shanghai', name: "出发地 上海", color: "lightblue", linkText: 'aaaa'},
                {key: 'jiangsu', name: "途径地 江苏", color: "pink", linkText: 'bbbb'},
                {key: 'anhui', name: "途径地 安徽", color: "pink", linkText: 'cccc'},
                {key: 'shandong', name: "途径地 山东", color: "orange", linkText: 'ddddd'},
                {key: 'hebei', name: "途径地 河北", color: "orange", linkText: 'eee'},
                {key: 'tianjin', name: "途径地 天津", color: "orange", linkText: 'fff'},
                {key: 'beijing', name: "目的地 北京", color: "lightgreen", linkText: 'ggg'}
            ],
            [ // 连线
                {from: "shanghai", to: "jiangsu", category: 'aa'},
                {from: "jiangsu", to: "anhui", category: 'aa'},
                {from: "anhui", to: "shandong", category: 'dashed'},
                {from: "shandong", to: "hebei", category: 'dashed'},
                {from: "hebei", to: "tianjin", category: 'aa'},
                {from: "tianjin", to: "beijing", category: 'dashed'}
            ]
        );
// 定义集合，存储实线、虚线模板
        const templmap = new go.Map()
        const color = '#000'

// 默认连线模板
        const defaultTemplate = $(
            go.Link,
            {
                // 链路路由应避开节点
                routing: go.Link.AvoidsNodes,
                corner: 10,
                curve: go.Link.JumpGap
            },
            $(go.Shape, {stroke: color, strokeWidth: 3}),
            $(go.Shape, {toArrow: 'Standard', fill: 'red', stroke: 'red', strokeWidth: 3}),
        )

// 虚线连线模板，关键属性：strokeDashArray: [6, 3]
        const dashedTemplate = $(
            go.Link,
            //name: 'dashedLink',//后面动画用到
            //$(go.Shape, {name: 'dashedLink', stroke: color, strokeWidth: 1, strokeDashArray: [6, 3]}),
            //$(go.Shape, {isPanelMain: true, stroke: "red", strokeWidth: 1}),

            {
                // 链路路由应避开节点
                routing: go.Link.AvoidsNodes,
                corner: 10,
                curve: go.Link.JumpGap
            },
            $(go.Shape, {

                isPanelMain: true,
                stroke: "red",
                strokeWidth: 4
            }),
            $(go.Shape, {
                name: "dashedLink",  //后面动画用到
                isPanelMain: true,
                stroke: "white",
                strokeWidth: 2,
                strokeDashArray: [6, 4]
            }),
            $(go.Shape, {toArrow: 'Standard', fill: color, stroke: color, strokeWidth: 5})
        )

        templmap.add('aa', defaultTemplate)
        // dashed 为名称，描述时用属性 category: 'dashed' 指定
        templmap.add('dashed', dashedTemplate)

        myDiagram.linkTemplateMap = templmap
        //myDiagram.layout = $(go.LayeredDigraphLayout);

        function animation() {
            const animation = new go.Animation();
            // 虚线动画
            myDiagram.links.each((link) => {
                const dashedLink = link.findObject("dashedLink");
                if (dashedLink) {
                    animation.add(dashedLink, "strokeDashOffset", 10, 0)
                }
            });

            animation.easing = go.Animation.EaseLinear;
            // Run indefinitely
            animation.runCount = Infinity;
            animation.start();
        }

        animation()


        // myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
    };

    onMounted(() => {
        init();
    });


</script>

<style scoped>

</style>